//自定义样式-导出
function createReportDom(data, moment) {
  const dom = document.querySelector("#report--export");
  let imgs = "";
  let hospital_logo, hospital_name, doc_name, sign;
  hospital_logo =
    data.report_user_info && data.report_user_info.hospital
      ? data.report_user_info.hospital.logo ? data.report_user_info.hospital.logo : "http://127.0.0.1:5007/pubilc/uploads/hosLogo.png"
      : "http://127.0.0.1:5007/pubilc/uploads/hosLogo.png";
  hospital_name =
    data.report_user_info && data.report_user_info.hospital
      ? data.report_user_info.hospital.name
      : "--";
  doc_name =
    data.report_user_info && data.report_user_info.user
      ? data.report_user_info.user.name
      : "--";
  sign =
    data.report_user_info && data.report_user_info.user
      ? data.report_user_info.user.logo ? data.report_user_info.user.logo : null
      : null;
  if (data.images.length > 0) {
    data.images.forEach((item) => {
      console.log(item);
      if (item.image || item.url) {
        imgs += `<div
        class="preview--img-box"
        style="
          width: 386px;
          height: 217px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 5px 5px 5px 5px;
        "
      >
        <img
          src="${item.image || item.url}"
          alt=""
          class="preview--img"
          style="width: 100%; height: 100%; object-fit: cover"
        />
      </div>`;
      }
    });
  }
  const con = `
      <div
      class="report--header--item"
      style="
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      "
      >
        <div
          class="report--header--item--logo"
          style="
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            marign-right: 20px;
          "
        >
            <img
              src="${hospital_logo}"
              alt=""
              class="report--header--item--logo--img"
              style="height: 100%; object-fit: cover"
            />
          </div>
          <span
            class="report--header--item--title"
            style="color: #000; font-size: 26px; font-weight: bold"
          >${hospital_name}</span>
        </div>
          <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
          "
        >
          <span
            style="
              display: inline-block;
              color: #000;
              font-size: 24px;
              padding:5px 0;
            "
            >5G自主超声机器人检查报告</span
          >
        </div>
  <div class="report--header" style="width: 100%;border-top: 1px solid black;padding: 10px 10px; display: flex;  flex-wrap: wrap;">
      <div
          class="report--header--item"
          style="width: 32%; margin: 5px 0;"
      >
          <span class="report--header--sub" style="color: #000; font-size: 16px"
            >姓名:${data.name ? data.name : "--"}</span
          >
      </div>
      <div
          class="report--header--item"
          style="width: 32%; margin: 5px 0;"
      >
          <span class="report--header--sub" style="color: #000; font-size: 16px"
            >性别:${data.sex === 1 ? "男" : "女"}</span
          >
      </div>
      <div
          class="report--header--item"
          style="width: 32%; margin: 5px 0;"
      >
        <span class="report--header--sub" style="color: #000; font-size: 16px"
          >年龄:${data.year}</span
        >
      </div>
      <div
          class="report--header--item"
          style=" width: 32%; margin: 5px 0; "
      >
        <span class="report--header--sub" style="color: #000; font-size: 16px">检查部位:${
          data.pos ? data.pos : "--"
        }</span>
      </div>
      <div
          class="report--header--item"
          style="width: 32%; margin: 5px 0;"
      >
        <span class="report--header--sub" style="color: #000; font-size: 16px"
          >检查号:${data.sNo ? data.sNo : "--"}</span
        >
      </div>
      <div
          class="report--header--item"
          style="width: 32%; margin: 5px 0;"
      >
          <span class="report--header--sub" style="color: #000; font-size: 16px"
            >科室:${data.magic2 ? data.magic2 : "--"}</span
          >
      </div>    
      <div
          class="report--header--item"
          style="width: 32%; margin: 5px 0;"
      >
        <span class="report--header--sub" style="color: #000; font-size: 16px"
          >住院号:${data.magic1 ? data.magic1 : "--"}</span
        >
      </div>
      <div
          class="report--header--item"
          style=" width: 32%; margin: 5px 0; "
      >
        <span class="report--header--sub" style="color: #000; font-size: 16px"
          >床号:${data.magic3 ? data.magic3 : "--"}</span
        >
      </div> 
      <div
          class="report--header--item"
          style=" width: 32%; margin: 5px 0; "
      >
          <span class="report--header--sub" style="color: #000; font-size: 16px">主诉:${
            data.magic4 ? data.magic4 : "--"
          }</span>
      </div>
     </div>
     <div
       class="report--img"
       style="
         width: 100%;
         border-top: 1px solid black;
         border-bottom: 1px solid black;
         margin-bottom: 30px;
         display: flex;
         flex-wrap: wrap;
       "
     >
         ${imgs}
     </div>
     <div class="report--word">
       <h3 class="report--title2" style="font-weight: bold">超声检查所见:</h3>
       <p class="report--con" style="text-indent: 25px">
           ${data.seen ? data.seen : "--"}
       </p>
       <h3 class="report--title2" style="font-weight: bold">
       超声检查结果:
       </h3>
       <p class="report--con" style="text-indent: 25px;padding:20px 0">
           ${data.tips ? data.tips : "--"}
       </p>
     </div>
     <div
       class="report--footer"
       style="
         display: flex;
         width: 100%;
         height: 120px;
         align-items: center;
         justify-content: end;
         color: #000;
         border-top: 1px solid #000;
         position: relative;
         padding:20px 0;
       "
     > 
        <span class="footer--sub--tips"      
        style="
        color: #000;
        position: absolute;
        left: 0px;
        top:5px;
        font-weight: bold;
      ">本报告仅供临床医师参考.</span>
      <span class="footer--sub" style="color: #000;margin-right:20px">报告时间:
      <span style="display: inline-block; color: #000"
      >${moment(data.createdAt).format("YYYY-MM-DD HH:mm:ss")}</span>
      </span>
      <span class="footer--sub" style="color: #000">检查医师:</span>
      <span style="display: inline-block; color: #000;margin-right:20px"
      >${doc_name}</span>
       <span class="footer--sub" style="color: #000">签名:</span>
       <div class="sign--box" style="min-width: 100px;height: 70%;display: flex;align-items: center;justify-content: center">
         <img src="${sign}" alt="" style="height:63%;object-fit:contain;">
       </div>
     </div>`;
  dom.innerHTML = con;
  return dom;
}
window.ReportHandle = createReportDom;
//预览
window.cusTomReport = function (data, moment) {
  let imgs = "";
  let hospital_logo, hospital_name, doc_name, sign;
  hospital_logo =
    data.report_user_info && data.report_user_info.hospital
      ? data.report_user_info.hospital.logo ? data.report_user_info.hospital.logo : "http://127.0.0.1:5007/pubilc/uploads/hosLogo.png"
      : "http://127.0.0.1:5007/pubilc/uploads/hosLogo.png";
  hospital_name =
    data.report_user_info && data.report_user_info.hospital
      ? data.report_user_info.hospital.name
      : "--";
  doc_name =
    data.report_user_info && data.report_user_info.user
      ? data.report_user_info.user.name
      : "--";
  sign =
    data.report_user_info && data.report_user_info.user
      ? data.report_user_info.user.logo ? data.report_user_info.user.logo : null
      : null;
  if (data.images.length > 0) {
    data.images.forEach((item) => {
      if (item.image || item.url) {
        imgs += `<div
        class="preview--img-box"
        style="
          width: 386px;
          height: 217px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 5px 5px;
        "
      >
        <img
          src="${item.image || item.url}"
          alt=""
          class="preview--img"
          style="width: 100%; height: 100%; object-fit: cover"
        />
      </div>`;
      }
    });
  }
  const con = `
        <div
        class="report--header--item"
        style="
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        "
      >
        <div
          class="report--header--item--logo"
          style="
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            marign-right: 20px;
          "
        >
          <img
            src="${hospital_logo}"
            alt=""
            class="report--header--item--logo--img"
            style="height: 100%; object-fit: cover"
          />
        </div>
        <span
          class="report--header--item--title"
          style="color: #000; font-size: 30px; font-weight: bold"
        >${hospital_name}</span>
      </div>
      <div
      style="
        display: flex;
        align-items: center;
        justify-content: center;
      "
    >
      <span
        style="
          display: inline-block;
          color: #000;
          font-size: 24px;
          padding:5px 0;
        "
        >5G自主超声机器人检查报告</span>
    </div>
    <div class="report--header" style="width: 100%;border-top: 1px solid black;padding: 10px 10px; display: flex;  flex-wrap: wrap;">
        <div
              class="report--header--item"
              style="width: 32%; margin: 5px 0;"
        >
              <span class="report--header--sub" style="color: #000; font-size: 16px"
                >姓名:${data.name ? data.name : "--"}</span
              >
        </div>
        <div
              class="report--header--item"
              style="width: 32%; margin: 5px 0;"
          >
              <span class="report--header--sub" style="color: #000; font-size: 16px"
                >性别:${data.sex === 1 ? "男" : "女"}</span
              >
        </div>
        <div
              class="report--header--item"
              style="width: 32%; margin: 5px 0;"
        >
              <span class="report--header--sub" style="color: #000; font-size: 16px"
                >年龄:${data.year}</span
              >
        </div>
        <div
              class="report--header--item"
              style=" width: 32%; margin: 5px 0; "
        >
              <span class="report--header--sub" style="color: #000; font-size: 16px">检查部位:${
                data.pos ? data.pos : "--"
              }</span>
        </div>
        <div
              class="report--header--item"
              style=" width: 32%; margin: 5px 0; "
        >
              <span class="report--header--sub" style="color: #000; font-size: 16px"
                >检查号:${data.sNo ? data.sNo : "--"}</span>
        </div>
        <div
              class="report--header--item"
              style=" width: 32%; margin: 5px 0; "
        >
              <span class="report--header--sub" style="color: #000; font-size: 16px"
                >科室:${data.magic2 ? data.magic2 : "--"}</span
              >
        </div>
        <div
              class="report--header--item"
              style=" width: 32%; margin: 5px 0; "
        >
              <span class="report--header--sub" style="color: #000; font-size: 16px"
                >住院号:${data.magic1 ? data.magic1 : "--"}</span>
        </div>
        <div
              class="report--header--item"
              style=" width: 32%; margin: 5px 0; "
        >
              <span class="report--header--sub" style="color: #000; font-size: 16px"
                >床号:${data.magic3 ? data.magic3 : "--"}</span
              >
        </div>
        <div
              class="report--header--item"
              style=" width: 32%; margin: 5px 0; "
              >
              <span class="report--header--sub" style="color: #000; font-size: 16px">主诉:${
                data.magic4 ? data.magic4 : "--"
              }</span>
        </div>  
     </div>
     <div
       class="report--img"
       style="
         width: 100%;
         border-top: 1px solid black;
         border-bottom: 1px solid black;
         margin-bottom: 30px;
         display: flex;
         flex-wrap: wrap;
       "
     >
         ${imgs}
     </div>
     <div class="report--word">
       <h3 class="report--title2" style="font-weight: bold">超声检查所见:</h3>
       <p class="report--con" style="text-indent: 25px">
           ${data.seen ? data.seen : "--"}
       </p>
       <h3 class="report--title2" style="font-weight: bold">
         超声检查结果:
       </h3>
       <p class="report--con" style="text-indent: 25px">
           ${data.tips ? data.tips : "--"}
       </p>
     </div>
     <div
       class="report--footer"
       style="
         display: flex;
         width: 100%;
         height: 120px;
         align-items: center;
         justify-content: end;
         color: #000;
         border-top: 1px solid #000;
         position: relative;
         padding:20px 0;
       "
     > 
      <span class="footer--sub--tips"      
        style="
        color: #000;
        position: absolute;
        left: 0px;
        top:5px;
        font-weight: bold;
      ">本报告仅供临床医师参考.</span>
     <span class="footer--sub" style="color: #000;margin-right:20px">报告时间:
     <span style="display: inline-block; color: #000"
     >${moment(data.createdAt).format("YYYY-MM-DD HH:mm:ss")}</span>
     </span>
     <span class="footer--sub" style="color: #000">检查医师:</span>
     <span style="display: inline-block; color: #000;margin-right:20px"
     >${doc_name}</span>
     <span class="footer--sub" style="color: #000">签名:</span>
       <div class="sign--box" style="min-width: 100px;height: 70%;display: flex;align-items: center;justify-content: center">
         <img src="${sign}" alt="" style="height:63%;object-fit:contain;">
       </div>
     </div>`;
  return con;
};
//打印
window.cusTomPrint = function (data, moment) {
  let con;
  let imgs = "";
  let hospital_logo, hospital_name, doc_name, sign;
  hospital_logo =
    data.report_user_info && data.report_user_info.hospital
      ? data.report_user_info.hospital.logo ? data.report_user_info.hospital.logo :  "http://127.0.0.1:5007/pubilc/uploads/hosLogo.png"
      : "http://127.0.0.1:5007/pubilc/uploads/hosLogo.png";
  hospital_name =
    data.report_user_info && data.report_user_info.hospital
      ? data.report_user_info.hospital.name
      : "--";
  doc_name =
    data.report_user_info && data.report_user_info.user
      ? data.report_user_info.user.name
      : "--";
  sign =
    data.report_user_info && data.report_user_info.user
      ? data.report_user_info.user.logo ? data.report_user_info.user.logo : null
      : null;
  if (data.images.length > 0) {
    data.images.forEach((item, index) => {
      if (item.image || item.url) {
        if (index === 8 || index === 9) {
          imgs += `<div
            class="preview--img-box"
            style="
              width: 330px;
              height: 185px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin: 90px 5px 5px 5px;
            "
          >
            <img
              src="${item.image || item.url}"
              alt=""
              class="preview--img"
              style="width: 100%; height: 100%; object-fit: cover"
            />
          </div>`;
        } else if (index === 18 || index === 19) {
          imgs += `<div
            class="preview--img-box"
            style="
              width: 330px;
              height: 185px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin: 60px 5px 5px 5px;
            "
          >
            <img
              src="${item.image || item.url}"
              alt=""
              class="preview--img"
              style="width: 100%; height: 100%; object-fit: cover"
            />
          </div>`;
        } else if (index === 28 || index === 29) {
          imgs += `<div
            class="preview--img-box"
            style="
              width: 330px;
              height: 185px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin: 60px 5px 5px 5px;
            "
          >
            <img
              src="${item.image || item.url}"
              alt=""
              class="preview--img"
              style="width: 100%; height: 100%; object-fit: cover"
            />
          </div>`;
        } else if (index === 38 || index === 39) {
          imgs += `<div
            class="preview--img-box"
            style="
              width: 330px;
              height: 185px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin:60px 5px 5px 5px;
            "
          >
            <img
              src="${item.image || item.url}"
              alt=""
              class="preview--img"
              style="width: 100%; height: 100%; object-fit: cover"
            />
          </div>`;
        } else {
          imgs += `<div
            class="preview--img-box"
            style="
              width: 330px;
              height: 185px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin: 5px 5px;
            "
          >
            <img
              src="${item.image || item.url}"
              alt=""
              class="preview--img"
              style="width: 100%; height: 100%; object-fit: cover"
            />
          </div>`;
        }
      }
    });
  }
  con = `
      <div
        class="report--header--item"
        style="
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        "
      >
        <div
          class="report--header--item--logo"
          style="
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            marign-right: 20px;
          "
        >
          <img
            src="${hospital_logo}"
            alt=""
            class="report--header--item--logo--img"
            style="height: 100%; object-fit: cover"
          />
        </div>
        <span
          class="report--header--item--title"
          style="color: #000; font-size: 26px; font-weight: bold"
        >${hospital_name}</span>
      </div>
      <div
      style="
        display: flex;
        align-items: center;
        justify-content: center;
      "
    >
      <span
        style="
          display: inline-block;
          color: #000;
          font-size: 23px;
          padding:5px 0;
        "
        >5G自主超声机器人检查报告</span
      >
    </div>
  <div class="report--header" style="width: 100%;border-top: 1px solid black;padding: 10px 10px; display: flex;  flex-wrap: wrap;">
        <div
              class="report--header--item"
              style="width: 32%; margin: 5px 0;"
        >
              <span class="report--header--sub" style="color: #000; font-size: 16px"
                >姓名:${data.name ? data.name : "--"}</span
              >
        </div>
        <div
              class="report--header--item"
              style="width: 32%; margin: 5px 0;"
        >
              <span class="report--header--sub" style="color: #000; font-size: 16px"
                >性别:${data.sex === 1 ? "男" : "女"}</span
              >
        </div>
        <div
              class="report--header--item"
              style="width: 32%; margin: 5px 0;"
        >
              <span class="report--header--sub" style="color: #000; font-size: 16px"
                >年龄:${data.year}</span
              >
        </div>
        <div
              class="report--header--item"
              style=" width: 32%; margin: 5px 0; "
        >
              <span class="report--header--sub" style="color: #000; font-size: 16px">检查部位:${
                data.pos ? data.pos : "--"
              }</span>
        </div>
        <div
              class="report--header--item"
              style="width: 32%; margin: 5px 0;"
        >
              <span class="report--header--sub" style="color: #000; font-size: 16px"
                >检查号:${data.sNo ? data.sNo : "--"}</span
              >
        </div>
        <div
              class="report--header--item"
              style="width: 32%; margin: 5px 0;"
        >
              <span class="report--header--sub" style="color: #000; font-size: 16px"
                >科室:${data.magic2 ? data.magic2 : "--"}</span
              >
        </div>
        <div
              class="report--header--item"
              style="width: 32%; margin: 5px 0;"
        >
              <span class="report--header--sub" style="color: #000; font-size: 16px"
                >住院号:${data.magic1 ? data.magic1 : "--"}</span
              >
        </div>
        <div
              class="report--header--item"
              style=" width: 32%; margin: 5px 0; "
        >
              <span class="report--header--sub" style="color: #000; font-size: 16px"
                >床号:${data.magic3 ? data.magic3 : "--"}</span
              >
        </div>  
        <div
              class="report--header--item"
              style=" width: 32%; margin: 5px 0; "
        >
              <span class="report--header--sub" style="color: #000; font-size: 16px">主诉:${
                data.magic4 ? data.magic4 : "--"
              }</span>
        </div>
      </div>
      <div
        class="report--img"
        style="
          width: 100%;
          border-top: 1px solid black;
          border-bottom: 1px solid black;
          margin-bottom: 30px;
          display: flex;
          flex-wrap: wrap;
        "
      >
          ${imgs}
      </div>
      <div class="report--word">
        <h3 class="report--title2" style="font-weight: bold">超声检查所见:</h3>
        <p class="report--con" style="text-indent: 25px">
            ${data.seen ? data.seen : "--"}
        </p>
        <h3 class="report--title2" style="font-weight: bold">
         超声检查结果:
        </h3>
        <p class="report--con" style="text-indent: 25px">
            ${data.tips ? data.tips : "--"}
        </p>
      </div>
      <div
        class="report--footer"
        style="
          display: flex;
          width: 100%;
          height: 120px;
          align-items: center;
          justify-content: end;
          color: #000;
          border-top: 1px solid #000;
          position: relative;
          padding:20px 0;
          margin-top:20px
        "
      > 
          <span class="footer--sub--tips"      
          style="
          color: #000;
          position: absolute;
          left: 0px;
          top:5px;
          font-weight: bold;
        ">本报告仅供临床医师参考.</span>
        <span class="footer--sub" style="color: #000;margin-right:20px">报告时间:
        <span style="display: inline-block; color: #000"
        >${moment(data.createdAt).format("YYYY-MM-DD HH:mm:ss")}</span>
        </span>
        <span class="footer--sub" style="color: #000">检查医师:</span>
        <span style="display: inline-block; color: #000;margin-right:20px"
        >${doc_name}</span>
        <span class="footer--sub" style="color: #000">签名:</span>
        <div class="sign--box" style="min-width: 100px;height: 70%;display: flex;align-items: center;justify-content: center">
          <img src="${sign}" alt="" style="height:63%;object-fit:contain;">
        </div>
      </div>`;
  return con;
};
